<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :title="t('routes.system.authorization.module.moduleFunctions')"
    width="1000px"
  >
    <AdTable @register="registerTable" :searchInfo="filterGroupRef" size="small" />
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';

  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { AdTable, useAdTable } from '@/components/AdTable';
  import { FilterRule, FilterGroup } from '@/utils/common/types';
  import { FilterOperateEnum } from '@/enums/filterOperateEnum';

  import { moduleFunctionColumns } from './module.data';

  import { readModuleFunctions } from '@/api/authorization/admin/module';

  defineOptions({ name: 'ModuleFunctionDrawer' });

  const { t } = useI18n();
  const filterGroupRef = ref<FilterGroup>(new FilterGroup());

  const [registerTable, { reload }] = useAdTable({
    // 表标题呈现器
    title: t('routes.system.authorization.module.moduleFunctionList'),
    // 表格数据接口请求对象
    api: readModuleFunctions,
    // 表单列信息 BasicColumn[]
    columns: moduleFunctionColumns,
    // 是否可拖拽列
    canColDrag: false,
    // 使用搜索表单
    useSearchForm: false,
    // 显示表格设置工具
    showTableSetting: true,
    //表格设置项
    tableSetting: { redo: true, size: true, setting: false, fullScreen: false },
    // 是否显示表格边框
    bordered: false,
    // 是否显示序号列
    showIndexColumn: true,
  });

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    filterGroupRef.value.Rules = [];
    if (data.record.Id) {
      filterGroupRef.value.Rules.push(
        new FilterRule('TreePathString', `$${data.record.Id}$`, FilterOperateEnum.Contains),
      );
    }
    await reload();
    setDrawerProps({ confirmLoading: false });
  });
</script>
